const HtmlWebpackPlugin = require('html-webpack-plugin')

const { resolve } = require('path')
const htmlPublicPath = resolve(__dirname, 'build')

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: htmlPublicPath,
    publicPath: './',
  },
  module: {
    rules: [
      // --------- 第一种 --------------
      // {
      //   test: /\.js$/,
      //   exclude: /node_modules/,
      //   loader: 'babel-loader',
      //   options: {
      //     // 预设：只是babel做怎么样的兼容处理
      //     //    问题：只能转换基本语法 promise 在IE浏览器不行
      //     presets: ['@babel/preset-env'],
      //   }
      // },
      // --------- 第三种 --------------
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [[
            '@babel/preset-env',
            {
              // 按需加载
              useBuiltIns: 'usage',
              corejs: {
                version: 3,
              },
              // 执行兼容性做到哪个版本浏览器
              targets: {
                chrome: '60',
                firefox: '60',
                ie: '9',
                safari: '10',
                edge: '17'
              }
            }
          ]],
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自动修改 错误
          fix: true,
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}